<template>
  <div class="container">
    <div class="dowebok">
      <div class="logo"></div>
      <el-form
        ref="form"
        style="width: 80%; margin: auto"
        :model="loginForm"
        :rules="loginRules"
      >
        <el-form-item prop="username">
          <el-input
            v-model="loginForm.username"
            clearable
            type="text"
            auto-complete="off"
            placeholder="请输入手机号"
            prefix-icon="el-icon-user-solid"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="loginForm.password"
            type="password"
            auto-complete="off"
            placeholder="请输入密码"
            prefix-icon="el-icon-lock"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input
            v-model="loginForm.confirmPassword"
            type="password"
            auto-complete="off"
            placeholder="请确认密码"
            prefix-icon="el-icon-lock"
          >
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            plain
            style="width: 100%; font-size: 15px"
            @click="handleRegister"
            >注 册</el-button
          >
        </el-form-item>
      </el-form>
      <div class="reg-bar">
        <a class="reg" @click="goLogin">返回登录</a>
      </div>
    </div>
    <ul class="bg-bubbles">
      <li v-for="i in 10" :key="i" />
    </ul>
  </div>
</template>

<script>
import { register } from '@/api/login.js'

export default {
  name: "Register",
  components: {},
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.loginForm.password !== value) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      equalToPassword,
      loginForm: {
        username: '',
        password: '',
        confirmPassword: ''
      },
      loginRules: {
        username: [{ required: true, trigger: 'blur', message: '请输入您的手机号' },
        {
          pattern: /^(13[0-9]|14[5-7]|15[0-35-9]|16[25-7]|17[0-8]|18[0-9]|19[0135689])\d{8}$/gm,
          message: '请輸入正确的手机号',
          trigger: 'blur'
        }
        ],
        password: [{ required: true, trigger: 'blur', message: '请输入您的密码' },
        { min: 5, max: 20, message: '用户密码长度必须介于 5 和 20 之间', trigger: 'blur' }],
        confirmPassword: [
          { required: true, trigger: 'blur', message: '请再次输入您的密码' },
          { required: true, validator: equalToPassword, trigger: 'blur' }
        ],
      },
    };
  },
  created() { },
  methods: {
    handleRegister() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          register(this.loginForm).then(() => {
            this.$message("注册成功，请登录！")
            this.$router.push('/login')
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    goLogin() {
      this.$router.push('/login')
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ input::-webkit-input-placeholder {
  -webkit-text-fill-color: #ccc;
  font-weight: 300;
}
/deep/ input::-moz-input-placeholder {
  -webkit-text-fill-color: #ccc;
  font-weight: 300;
}
/deep/ input::-ms-input-placeholder {
  -webkit-text-fill-color: #ccc;
  font-weight: 300;
}

.container {
  width: 100%;
  height: 100%;
  //   background-color: #333;
  background: #fff url(../assets/imgs/bg.png) 50% 50% no-repeat;
  background-size: cover;
}
.dowebok {
  z-index: 99;
  //   backdrop-filter: saturate(150%) blur(8px);
  //   -webkit-backdrop-filter: saturate(150%) blur(8px);
  background-color: rgba(0, 0, 0, 0.2);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 430px;
  height: 550px;
  margin: -300px 0 0 -215px;
  border: 1px solid #fff;
  border-radius: 20px;
  overflow: hidden;
}
.logo {
  width: 104px;
  height: 104px;
  margin: 50px auto 80px;
  background: url(../assets/imgs/logo1.png) 0 0 no-repeat;
  background-size: cover;
}
.form-item {
  position: relative;
  width: 360px;
  margin: 0 auto;
  padding-bottom: 30px;
}
.form-item input {
  width: 288px;
  height: 48px;
  padding-left: 70px;
  border: 1px solid #fff;
  border-radius: 25px;
  font-size: 18px;
  color: #fff;
  background-color: transparent;
  outline: none;
}
.form-item button {
  width: 360px;
  height: 50px;
  border: 0;
  border-radius: 25px;
  font-size: 18px;
  color: #1f6f4a;
  outline: none;
  cursor: pointer;
  background-color: #fff;
}
#username {
  background: url(../assets/imgs/emil.png) 20px 14px no-repeat;
}
#password {
  background: url(../assets/imgs/password.png) 23px 11px no-repeat;
}
.tip {
  display: none;
  position: absolute;
  left: 20px;
  top: 52px;
  font-size: 14px;
  color: #f50;
}
.reg-bar {
  width: 360px;
  margin: 20px auto 0;
  font-size: 14px;
  overflow: hidden;
}
.reg-bar a {
  color: #fff;
  text-decoration: none;
}
.reg-bar a:hover {
  text-decoration: underline;
}
.reg-bar .reg {
  float: left;
}
.reg-bar .forget {
  float: right;
}
.dowebok ::-webkit-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok :-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok ::-moz-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}
.dowebok :-ms-input-placeholder {
  font-size: 18px;
  line-height: 1.4;
  color: #fff;
}

@media screen and (max-width: 500px) {
  * {
    box-sizing: border-box;
  }
  .dowebok {
    position: static;
    width: auto;
    height: auto;
    margin: 0 30px;
    border: 0;
    padding: 0 15px;
    // border-radius: 0;
    border-radius: 8px;
    transform: translateY(50px);
  }
  .logo {
    margin: 50px auto;
  }
  .form-item {
    width: auto;
  }
  .form-item input,
  .form-item button,
  .reg-bar {
    width: 100%;
  }
}
</style>
